﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Templates_StoreLocator_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" Runat="Server">
    <%--<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>--%>
    <%--<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAN01pbIn9H-ZAOiLyKyx-bRRGp5aKvK5jPrDf3lSMPzCKciNQ_BScTYEgd309tBTv68yj-xZrDQBiKg" type="text/javascript"></script>--%>
    
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAN01pbIn9H-ZAOiLyKyx-bRQD7R3yIbQVJ8kS--VorBZXRIY0YxRMYK0BHsiCFuU4wIaj3D_SLvMg3Q" type="text/javascript"></script>
    
    <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(
            function() {
                if (GBrowserIsCompatible()) {
                    var map = new GMap2(document.getElementById("map_canvas"));
                    map.setCenter(new GLatLng(53.456394, -1.986523), 6);
                    map.setUIToDefault();
                    var mgr = new MarkerManager(map);
                    var markers = [];
                    for (var i = 0; i < stores.length; i++) {
                        if (stores[i].lat > 0 && stores[i].log != 0) {
                            stores[i].marker = new GMarker(new GLatLng(stores[i].lat, stores[i].lng));
                            GEvent.addListener(stores[i].marker, "click", showInfoWindow);
                            markers.push(stores[i].marker);
                        }
                    }
                    mgr.addMarkers(markers, 1);
                    mgr.refresh();
                }
            }
       );

        function Store(name, address, lat, lng, url)
        {
            this.name = name;
            this.address = address;
            this.lat = lat;
            this.lng = lng;
            this.url = url;
        };

        Store.prototype.getHtml = function(){
        return "<a style=\"color:black\" href=\"" + this.url + "\"><b>" + this.name + "</b><p>" + this.address + "</p></a>";
        }

        var showInfoWindow = function(latlong) {
            var html = "";
            var markerToUse = null;
            for (var i = 0; i < stores.length; i++) {
                if (stores[i].marker && stores[i].marker.getLatLng().lat() == latlong.lat() && stores[i].marker.getLatLng().lng() == latlong.lng()) {
                    if (markerToUse) {
                        html += "<hr/>";
                    }
                    else {
                        markerToUse = stores[i].marker;
                    }
                    html += stores[i].getHtml();
                }
            }
            if (markerToUse) {
                markerToUse.openInfoWindow(html);
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphMain" Runat="Server">
    <div class="clearfix">
    <h2>Store Locator</h2>
    <p>Please select your store from the region list or navigate to your nearest store with the map.</p>
        <div style="float:left;">
            <ajax:Accordion ID="regions" DataSourceID="dsRegions" runat="server" HeaderCssClass="StoreAccordion_Header" HeaderSelectedCssClass="StoreAccordion_HeaderSelected" ContentCssClass="StoreAccordion_Content" CssClass="StoreAccordion" >
                <HeaderTemplate>
                    <%#Eval("Name") %>
                </HeaderTemplate>
                <ContentTemplate>
                    <acms:SimpleRepeater ID="stores" OnDataBinding="stores_DataBinding" OnItemDataBound="stores_ItemDataBound" runat="server">
                        <ItemTemplate>
                            <asp:HyperLink id="storeLink" style="display:block" runat="server">
                                <p><acms:PostDisplayName ID="PostDisplayName1" runat="server" /></p>
                                <p id="address" style="color:#56220D;font-size:x-small;padding-left:10px;" runat="server"></p>
                            </asp:HyperLink>
                        </ItemTemplate>
                    </acms:SimpleRepeater>
                </ContentTemplate>
            </ajax:Accordion>
            <acms:TopicDataSource ID="dsRegions" OnSelectData="dsRegions_SelectData" runat="server" />
            
        </div>
        
        <div style="float:right;">
            <div id="map_canvas" style="width:500px;height:500px"></div>
        </div>
    </div>
</asp:Content>

